<template>
  <p class="desc">加载互联网上公开的模型资源</p>
  <ul class="models">
    <li v-for="(item, i) in state.models" :key="i">
      <SvgIcon :name="item.status ? 'check-active' : 'check'" :size="15" @click="modelChange(item)" />
      <SvgIcon name="locate-active" :size="20" @click="zoomToModel(item)" v-show="item.status" />
      <span :class="[item.status ? 'active' : '']" @click="modelChange(item)">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script setup>
  import { reactive } from 'vue';
  import * as Cesium from 'cesium';

  const state = reactive({
    models: [
      { name: '杭州建筑白膜', url: 'https://md-1301600412.cos.ap-nanjing.myqcloud.com/GIS/3dtile/Hangzhou/tileset.json', status: false },
      { name: '西安大雁塔', url: 'http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json', status: false },
    ],
  });

  const modelMap = new WeakMap();

  async function modelChange(item) {
    try {
      if (item.status) {
        const tileset = modelMap.get(item);
        if (!tileset) return;
        viewer.scene.primitives.remove(tileset);
        modelMap.delete(item);
        item.status = false;
      } else {
        const tileset = await Cesium.Cesium3DTileset.fromUrl(item.url);
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 3000));
        item.status = true;
        modelMap.set(item, tileset);
      }
    } catch (error) {
      console.log(`Error loading tileset: ${error}`);
    }
  }

  function zoomToModel(item) {
    const tileset = modelMap.get(item);
    if (!tileset || !item.status) return;
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 3000));
  }
</script>

<style scoped lang="scss">
  .models {
    li {
      margin: 0.5em 0em;
      display: flex;
      align-items: center;
      gap: 1em;
      cursor: pointer;
      span {
        &:hover {
          color: rgb(12, 110, 223);
        }
        &.active {
          color: rgb(12, 110, 223);
        }
      }
    }
    :deep(.svg-icon) {
      &:hover {
        opacity: 0.8;
      }
    }
  }
</style>
